Menú superior oculto

Hay sitios que se hace dificil escoger un menú acorde con el diseño y otros donde dependiendo del menú le puede dar un aspecto recargado, sin embargo un menú con los enlaces más básicos es en mi opinión imprescindible y no hay que renunciar a tenerlo.
El menú que ofrecen en Webber 2.0 permanece oculto hasta que pasamos el cursor sobre la zona de la cabecera del blog.

Para que el menú haga la función de subir-bajar es necesario un script que podemos descargar desde aquí o la página del autor.

Una vez lo tenemos descargado y alojado en nuestro servidor lo añadimos en la plantilla justo antes de </head>

<script src='url-archivo-hide_menu-144c3a4.js' type='text/javascript'/>

Donde url-archivo-hide_menu-144c3a4.js lo sustituimos por la url de nuestro archivo alojado.

Sin necesidad de expandir la plantilla buscamos

<div id='outer-wrapper'><div id='wrap2'>

 justo después añadimos:

<div id='hit_area' onmouseover='toggleDown();'/>

<div id='menu_holder'>

<div id='nav'>

<ul>

<li><a href='url-enlace'>Texto a mostrar</a></li>

<li><a href='url-enlace'>Texto a mostrar</a></li>

<li><a href='url-enlace'>Texto a mostrar</a></li>

<li><a href='url-enlace'>Texto a mostrar</a></li>

<li><a href='url-enlace'>Texto a mostrar</a></li>

</ul>

</div>

</div>

<div id='hit_area2' onmouseover='toggleUp();'>

(La configuración del menú la dejaremos para el final)

Un poco más abajo veremos el bloque que contiene la cabecera del blog más o menos así:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='título blog (cabecera)' type='Header'/>

</b:section>

</div>

</div>

y añadiremos justo después </div>

Lo que hicimos fue añadir en outer-wrapper los eventos onmouseover para llamar a las funciones de deslizar el menú de arriba o abajo. Y cerramos con el último </div> después de header-wrapper para que el efecto se produzca al pasar el ratón por cualquier zona del bloque de la cabecera.

Por último añadimos los estilos al menú, buscamos ]]></b:skin> y justo antes añadimos:

#menu_holder {

height: 58px;

width: 100%;

display: block;

position: absolute;

top: -58px;

}

#nav {

height: 58px;

width: 542px;

margin: 0px auto;margin-left:190px;

padding: 0px;

background-image: url(url-imagen-right.png);

background-repeat: no-repeat;

background-position: right;

}

#hit_area {

height: 120px;

width: 100%;

margin: 0px;

padding: 0px;

display: block;

background-repeat: no-repeat;

}

#hit_area2 {

width: 100%;

background-repeat: no-repeat;

background-position: center top;

padding: 0px;

display: block;

position: absolute;

margin: 0px;

left: 0px;

top: 120px;

}

#nav ul {

margin: 0px;

padding: 0px 0px 0px 21px;

height: 58px;

list-style-type: none;

background-image: url(url-imagen-left.png);

background-repeat: no-repeat;

}

#nav li{

margin: 0px;

padding: 0px;

float: left;

}

#nav li a:link, #nav li a:active, #nav li a:visited {

background-image: url(url-imagen-middle.png);

background-repeat: repeat-x;

height: 58px;

width: 100px;

display: block;

line-height: 58px;

text-decoration: none;

text-align: center;

font-size: 140%;

font-family: Arial, Helvetica, sans-serif;

text-shadow: #000 0px 1px 2px;

font-variant:normal;

font-weight:bold;

color:#ffffff;

}

#nav li a:focus, #nav li a:hover{

text-decoration : none;

-moz-outline:0;

color:#B0E0F0;

background-image: url(url-imagen-rollOver.png);

background-repeat: repeat;

}

Como podemos ver en rojo están marcadas las imágenes que contiene el menú que son las siguientes:
Imagen left


Imagen right


Imagen middle


Imagen rollOver


Podemos poner el cursor sobre la imagen y guardarla en nuestro PC, luego la subimos a cualquier servidor ( el álbum de Picasa por ejemplo) y añadimos la url de las imágenes en los estilos cuidando que el nombre de cada imagen coincida con el sitio correspondiente.

Por último configuramos el menú, donde dice url-enlace lo sustituimos por la url del enlace. En Texto a mostrar es el texto que vemos y hace enlace con la página que enlazamos.
Para enlazar una página en concreto o el correo ver esta entrada.
El ejemplo del menú funcionando.